<!DOCTYPE html>
<html lang="zh-CN" style="overflow: hidden;" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{shared/layout.html}">

<head>
    <!--styles 样式-->
    <style type="text/css">

    </style>
</head>

<body>
<!--body-->
<th:block layout:fragment="body">
    <div class="m-20" id="app" v-cloak>
        <div class="container-fluid">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">

                    <div class="card mb-20">
                        <div class="card-body">
                            <div class="row">

                                <div class="col-sm-6">
                                    <h4 class="example-title">角色名称</h4>
                                    <input type="text" class="form-control" v-model="search.vm.name"
                                           placeholder="角色名称">
                                </div>

                                <!--以下被隐藏-->
                                <!-- <div class="col-sm-3" v-show="search.state">
                            <h4 class="example-title">角色名称</h4>
                            <input type="text" class="form-control" v-model="search.vm.name" placeholder="角色名称">
                        </div> -->
                                <!--检索操作-->
                                <div class="col-sm-6 text-center pt-35">
                                    <button type="button" class="btn btn-primary"
                                            @click="searchEvent">检索
                                    </button>&nbsp;
                                    <button type="button" class="btn btn-secondary" @click="reset">重置</button>&nbsp;
                                    <button type="button" class="btn btn-link" @click="search.state=!search.state"
                                            v-if="search_field_len">
                                        {{search.state?'收起':'展开'}}&nbsp;
                                        <i class="fas fa-chevron-up" v-if="search.state"></i>
                                        <i class="fas fa-chevron-down" v-else></i>
                                    </button>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="card m-0">
                        <div class="card-body pl-0 pr-0">
                            <div class="row ml-10 mr-10 mb-20">

                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <el-table :data="table.data"
                                              @selection-change="(array)=>{table.selecteds=array;}"
                                              @row-dblclick="row_dblclick" row-key="_ukid" size="medium"
                                              :header-cell-style="{background:'#fafafa'}">
                                        <!-- <el-table-column type="index" width="50" fixed></el-table-column>
                                        <el-table-column type="selection" width="50" fixed></el-table-column> -->

                                        <el-table-column prop="num" label="编号"></el-table-column>
                                        <el-table-column prop="name" label="角色名称"></el-table-column>

                                        <el-table-column fixed="right" label="权限" width="100">
                                            <template slot-scope="scope">
                                                <el-link type="primary"
                                                         @click="roleId=scope.row._ukid;getRoleMenuFunctionTree();">去设置
                                                </el-link>
                                                <!-- <el-link type="danger" @click="remove(scope.row._ukid)">删除
                                                </el-link> -->
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-pagination @size-change="(val)=>{table.rows=val;findList();}"
                                                   @current-change="(val)=>{table.page=val;findList();}"
                                                   :current-page="table.page"
                                                   :page-sizes="[10, 15, 20, 50, 100, 200, 300, 400, 1000]"
                                                   :page-size="table.rows"
                                                   layout="total, sizes, prev, pager, next, jumper"
                                                   :total="table.totalCount" class="mt-10 ml-10">
                                    </el-pagination>
                                </div>
                            </div>
                        </div>
                    </div>

                </el-col>
                <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">

                    <div class="card mb-0">
                        <div class="card-body">
                            <el-table style="width: 100%;margin-bottom: 20px;" row-key="id" default-expand-all
                                      :data="tree" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                                      size="medium">
                                <el-table-column prop="label" label="菜单名称" width="180"></el-table-column>
                                <el-table-column label="权限">
                                    <template slot-scope="scope">
                                        <el-checkbox-group v-model="scope.row.checkFunction"
                                                           @change="item=>saveFunctions(item,scope.row.id)">
                                            <el-checkbox v-for="(item,index) in scope.row.functions"
                                                         :label="item.id" :key="index">{{item.label}}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                </el-col>
            </el-row>
            <!-- <div class="card mb-15" v-show="search.state">
                <div class="card-body">
                    <div class="card-title">高级检索</div>
                    <div class="row">
                        <div class="col-sm-10">
                            <div class="row">
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" v-model="search.vm.name" placeholder="角色名称">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <button type="button" class="btn btn-primary" @click="findList">检索</button>&nbsp;
                            <button type="button" class="btn btn-secondary" @click="reset">重置</button>
                        </div>

                    </div>
                </div>
            </div>
            <div class="card m-0">
                <div class="card-body">
                    <div class="row mb-15">
                        <div class="col-sm-12">
                            <button class="btn btn-primary" @click="search.state=!search.state" v-if="power.Search">高级检索
                            </button>
                            <button class="btn btn-primary" @click="openForm()" v-if="power.Insert">新建</button>
                            <button class="btn btn-danger" @click="remove()" v-if="power.Delete">删除</button>
                            <button class="btn btn-primary" @click="exportExcel()" v-if="power.GetExcel">
                                导出Excel
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <el-table :data="table.data" @selection-change="(array)=>{table.selecteds=array;}" @row-dblclick="row_dblclick" row-key="_ukid" size="medium">
                                <el-table-column type="index" width="50" fixed></el-table-column>
                                <el-table-column type="selection" width="50" fixed></el-table-column>

                                <el-table-column prop="num" label="编号"></el-table-column>
                                <el-table-column prop="name" label="角色名称"></el-table-column>
                                <el-table-column prop="isDelete" label="能否删除"></el-table-column>
                                <el-table-column prop="updateTime" label="更新时间"></el-table-column>

                                <el-table-column fixed="right" label="操作" width="100">
                                    <template slot-scope="scope">
                                        <el-link type="primary" @click="openForm(scope.row._ukid)"
                                            v-if="power.Update">编辑
                                        </el-link>
                                        <el-link type="danger" @click="remove(scope.row._ukid)" v-if="power.Delete">
                                            删除
                                        </el-link>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination @size-change="(val)=>{table.size=val;findList();}" @current-change="(val)=>{table.page=val;findList();}" :current-page="table.page" :page-sizes="[10, 15, 20, 50, 100, 200, 300, 400, 1000]" :page-size="table.size" layout="total, sizes, prev, pager, next, jumper"
                                :total="table.total" class="mt-10">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
    <!--js 脚本-->
    <input type="hidden" th:value="${power}" id="power">
    <input type="hidden" th:value="${findback}" id="findback"/>
    <script type="text/javascript">
        let power = JSON.parse(document.getElementById("power").value);
        let findback = parseInt(document.getElementById("findback").value);
        let app = new Vue({
            el: "#app",
            data: function () {
                return {
                    prefix: '/admin/system/role/function',
                    power: power,
                    search: {
                        state: false,
                        vm: {
                            name: null
                        }
                    },
                    table: {
                        columns: [],
                        data: [],
                        page: 1,
                        size: 10,
                        total: 0,
                        selecteds: [] //选中的行
                    },
                    roleId: null,
                    tree: []
                }
            },
            //计算属性
            computed: {
                search_field_len: function () {
                    return Object.keys(this.search.vm).length > 3;
                }
            },
            created: function () {
                this.findList();
            },
            mounted: function () {

            },
            methods: {
                //获取列表
                findList: function () {
                    let _this = this;
                    let path = _this.prefix + '/list/' + _this.table.size + '/' + _this.table
                        .page;

                    hzyAdmin.post(path, _this.search.vm, function (r) {
                        if (r.code !== 1) return;
                        _this.table.data = r.data.dataSource;
                        _this.table.total = r.data.total;
                        _this.table.columns = r.data.cols;
                        //选择第一个角色加载他的权限列表
                        if (_this.table.data.length > 0) {
                            _this.roleId = _this.table.data[0]._ukid;
                            _this.getRoleMenuFunctionTree();
                        }
                    });
                },
                //检索
                searchEvent: function () {
                    this.table.page = 1;
                    this.findList();
                },
                //重置
                reset: function () {
                    this.table.page = 1;
                    for (let item in this.search.vm) this.search.vm[item] = null;
                    this.findList();
                },
                //删除
                remove: function (id) {
                    let _this = this;
                    let ids = [];
                    if (id) {
                        ids.push(id);
                    } else {
                        let selecteds = this.table.selecteds;
                        if (selecteds.length == 0) return hzyAdmin.alert("请勾选要删除得数据!", "错误");
                        for (let i = 0; i < selecteds.length; i++) {
                            ids.push(selecteds[i]._ukid);
                        }
                    }
                    if (confirm("确定要删除吗?")) {
                        //请求接口删除
                        let path = _this.prefix + '/delete';

                        hzyAdmin.post(path, ids, function (r) {
                            if (r.code !== 1) return;
                            hzyAdmin.alert("删除成功!", "成功");
                            _this.findList();
                        });
                    }
                },
                //打开表单
                openForm: function (id) {
                    let _this = this;
                    let path = _this.prefix + '/info' + (id ? '/' + id : '');

                    hzyAdmin.openPage(id ? '编辑' : '新建', path, function () {
                        _this.findList(); //刷新列表
                    });
                },
                //双击表格行
                row_dblclick: function (row, column, event) {
                    if (findback === 1) {
                        window.localStorage.setItem('findback', JSON.stringify(row));
                        hzyAdmin.layer.close(hzyAdmin.layer.getFrameIndex(window.name));
                    }
                },
                getRoleMenuFunctionTree: function () {
                    let _this = this;
                    if (!this.roleId) return hzyAdmin.alert('请选择要设置的角色!', '警告');
                    let path = _this.prefix + "/getRoleMenuFunctionTree/" + (this.roleId ? this
                        .roleId : '');

                    hzyAdmin.post(path, {}, function (r) {
                        if (r.code != 1) return;
                        _this.tree = r.data.list;
                    });
                },
                saveFunctions: function (funs, id) {
                    let _this = this;
                    let path = _this.prefix + "/save";

                    hzyAdmin.post(path, {
                        roleId: this.roleId,
                        menuId: id,
                        functionIds: funs
                    }, function (r) {
                        if (r.code != 1) return;
                        hzyAdmin.alert('设置成功!', '成功');
                    });
                },
            }
        });
    </script>
</th:block>
</body>

</html>